<html>
  <head>
	<script type="text/javascript" src="res/jquery-1.4.2.min.js" ></script>
	<script type="text/javascript" src="res/jquery.periodicalupdater.js" ></script>
	<script type="text/javascript" src="res/jquery.Guid.js" ></script>
	<script type="text/javascript" src="res/jqueryFileTree.js" ></script>
	<script type="text/javascript" src="res/jquery.ajaxmanager.js" ></script>
	<script type="text/javascript" src="res/jquery.tooltip.min.js" ></script>
	<script type="text/javascript" src="res/jquery.loadmask.min.js" ></script>

    <link href="res/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="res/jquery.tooltip.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="res/jquery.loadmask.css" rel="stylesheet" type="text/css" media="screen" />

	<script type="text/javascript">

        //TODO: very lame
        var validationStarted = false;

		function validate(file_name) {                                  
            if (validationStarted) {
                return;
            }
            validationStarted = true;

            validation_started();
            $('#full_log').html('Started.')
            $('#info').html('Started. See the full log for real-time output.')

            if (!file_name) { file_name = '' }

		    var content = $('#content').attr('value');

            var guid = $.Guid.New();

            var updater_handle = $.PeriodicalUpdater('getProgress', {
                method: 'get',
                data: { guid: guid },
                minTimeout: 1000,       // starting value for the timeout in milliseconds
                maxTimeout: 8000,       // maximum length of time between requests
                multiplier: 2,          // if set to 2, timerInterval will double each time the response hasn't changed (up to maxTimeout)
                type: 'text',           // response type - text, xml, json, etc.  See $.ajax config options
                maxCalls: 0,            // maximum number of calls. 0 = no limit.
                autoStop: 0             // automatically stop requests after this many returns of the same data. 0 = disabled.
            }, function(data) {
                $('#full_log').html(data);
            });

            $('#kill').attr('guid', guid);
            $('#kill').fadeIn();
			$.ajax({ url:'validate', type: 'POST', data: {'content' : content, 'guid' : guid, 'fileName' : file_name},
				success:function(data) {
                    updater_handle.stop();
				    eval("var result = " + data);
				    $('#info').html(result.info)
					$('#full_log').html(result.fullLog || 'No output was captured.');
					$('#progress').removeClass().addClass('p_' + result.status);
					if (result.status == 'red') {
						var pointer_txt = '\n';
						for (var i = 0 ; i < result.stepIndex-1 ; i++) {
							pointer_txt += '\n';
						}	
						pointer_txt += '>>>';				
						$('#pointer').html(pointer_txt);
					}
                    validationStarted = false;
				},
                complete:function(req, status) {
                    $('#kill').fadeOut();
                }} );
		}

        function kill() {
            var guid = $('#kill').attr('guid');
            $.ajax( { url:'kill', type: 'GET', data: { 'guid' : guid }, success: function(data) {
                validationStarted = false;
            }} );
        }

        function save_settings() {
            var settings = $('#settings').attr('value');
			$.ajax( {url:'saveSettings', type: 'POST', data: { 'settings' : settings },
                success:function(data) {
                     $('#settings_div').slideToggle();
                }
            });
		}
		
		function show_info() {
			$('#full_log_tab').hide();
            $('#info_tab').hide();
            $('#info_tab').fadeIn();
		}

        function validation_started() {
            if ($('#info_tab').is(':visible')) {
                show_info();
            } else {
                show_full_log();
            }
            $('#pointer').html('');
            $('#progress').removeClass().addClass('p_not_run');
        }
		      
		function show_full_log() {
			$('#info_tab').hide();
            $('#full_log_tab').hide();
            $('#full_log_tab').fadeIn();
		}

        function open_settings() {
            $.ajax( { url: 'settings', success: function(data) {
                $('#settings').attr('value', data);
                $('#settings_div').slideToggle();
            }});
        }
		
		function init() {
		    $('#settings_div').hide();
            $('#wait').hide();

            $('#wait').ajaxStart(function() { $('#wait').fadeIn() } );
            $('#wait').ajaxComplete(function(e, x, opts) {
                if (opts.url.substr(0, 11) != 'getProgress' && !validationStarted) $('#wait').fadeOut()
            } );

            $('#files_div').fileTree({                
                root: './',
                script: 'files',
                multiFolder: true
            }, function(file) {
                $.ajax( { url: file, success:function(data) {
                        $('#full_log').html('Full log: not validated yet.')
                        $('#info').html('Info: not validated yet.')
                        $('#content').attr('value', data);
                        validation_started();
                    }
                });
            });

            $('.help').tooltip( { showURL: false  } );
		}
	</script>  
	
	<style>

        body {
            font-family: Verdana;
        }

        a, a:visited {
            text-decoration: underline;
            color: #996600;
        }

        a:hover {
	        text-decoration: none;
        }

	  .p_not_run { background-color:#FFFFCC; }
	  .p_green { background-color:#99FF99; }
	  .p_red { background-color:#FF6633; }

      .help { cursor: help; }

      #wait {
          position: fixed;
          _position: absolute;
          top: 200;
          left: 47%;
          padding: 2px 5px;
          z-index: 5000;
          color: #fff;
      }        

	</style>

	<meta http-equiv="Expires" content="0" />
	<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />	  
  </head>

  <body onload="javascript:init()">

    <div id="wait" style="display:none">
        <img src="res/images/wait.gif" alt="Loader" />
    </div>

    <p><a href="#" onclick="javascript:open_settings()">Show/Hide settings</a></p>
    <div id="settings_div">
        <textarea id="settings" cols="120" rows="6"></textarea>
        <p><a href="#" onclick="javascript:save_settings()">Save settings</a> <img class="help" title="Saves settings on the server. They will be stored in accept.properties file." src="res/images/help.png" /></p>
    </div>
    <hr/>
  
    <p><span style="font-size:xx-large;">Stories&nbsp;</span><img class="help" title="Lists folders and *.story files found in the application root folder" src="res/images/help.png" /><p>
    <div id="files_div"></div>
    <div id="current_story">
        <div id="acceptance">
            <h3>
                <a href="#" onclick="javascript:validate()">Validate now!</a>
                <img class="help" title="Starts validation process. Will fork a java process on the server and execut the acceptance. Will use the latest settings." src="res/images/help.png" />
                <a id="kill" href="#" onclick="javascript:kill()" style="display:none;" >Kill process!</a>
            </h3>
            <textarea style="   color:#CC0033" id="pointer" cols="1" rows="10" readonly="readonly"></textarea>
            <textarea id="content" cols="60" rows="10">Above you see the list of stories - clicking on story will put here the acceptance of selected story.

You can also type here the acceptance criteria by hand. This allows you *learn* how the system works.</textarea>
        </div>
        <div id="progress" class="p_not_run">
            <h3>
                <a href="#" onclick="javascript:show_info()">Info</a>
                / <a href="#" onclick="javascript:show_full_log()">Full log</a>
                <img class="help" title="Info shows only important messages. Full log shows the entire output incrementally, refreshing every few seconds." src="res/images/help.png" />
            </h3>
        </div>
        <div id="info_tab" >
            <pre id="info" cols="80" rows="10" readonly="true">Info: not validated yet</pre>
        </div>
        <div id="full_log_tab" style="display:none;" >
            <pre id="full_log" cols="80" rows="10" readonly="true">Full log: not validated yet</pre>
        </div>
    </div>

  </body>
</html>